<template>
  <div class="bigPopup" >
    <div class="bigPopupHead">
      <i @click = "closeSelf" class="iconfont icon-close" ></i>
      <p class="bigPopupTitle">天津市城市规划设计研究总院</p>
      <p class="bigPopupTitleSen">收费规则：每小时6元  车场地址：南开区兰坪路18号</p>
    </div>
    <div class="bigPopupBody">
      <dv-border-box-12 class="left-div left-first">
        <div class="left-first-1">
          <barComponent background="#034044" :info-arr="barComponentArr" ></barComponent>
          <barComponent background="#032A49" :info-arr="barComponentArr1" ></barComponent>
        </div>
        <p class="bigPopupTitle titleH3" >泊位利用率</p>
        <trend style="height:calc(31% - 26px)"></trend>
        <p class="bigPopupTitle titleH3" >停车时长分布</p>
        <parkingTime style="height:calc(31% - 26px)"></parkingTime>
      </dv-border-box-12>
      <dv-border-box-12 class="left-div left-second">
        <div class="left-first-2">
          <barComponent background="#034044" :info-arr="barComponentArr_1" ></barComponent>
          <barComponent background="#032A49" :info-arr="barComponentArr1_1" ></barComponent>
        </div>
        <p class="bigPopupTitle titleH3" >充电泊位利用率</p>
        <trend style="height:calc(31% - 26px)"></trend>
        <p class="bigPopupTitle titleH3" >充电桩工作状态</p>
        <dv-scroll-board :config="config" style="width: 94%;height: 31%;" />
      </dv-border-box-12>
      <div class="right-div right-first" >
        <dv-border-box-12 >
          <p class="bigPopupTitle titleH3" >当日停车收费情况</p>
          <todayCharge style="height:calc(100% - 26px - 1em)"></todayCharge>
        </dv-border-box-12>
        <dv-border-box-12 >
          <p class="bigPopupTitle titleH3" >当日充电收费情况</p>
          <todayCharge style="height:calc(100% - 26px - 1em)"></todayCharge>
        </dv-border-box-12>
      </div>
      <div class="right-div right-second" >
        <dv-border-box-12 >
          <p class="bigPopupTitle titleH3" >电子支付来源分析</p>
          <dzzflyfxFace style="height: calc(100% - 26px)" :infoArr='["dzzflyfx_wx","dzzflyfx_zzb","dzzflyfx_yl","dzzflyfx_qt"]' ></dzzflyfxFace>
        </dv-border-box-12>
        <dv-border-box-12 >
          <p class="bigPopupTitle titleH3" >电子支付来源分析</p>
          <dzzflyfxFace style="height: calc(100% - 26px)" :infoArr='["dzzflyfx_wx","dzzflyfx_zzb","dzzflyfx_yl","dzzflyfx_qt"]' ></dzzflyfxFace>
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
import barComponent from "./barComponent";
import parkingTime from "@/components/parkingTime/index";
import todayCharge from "@/components/todayCharge/index";
import dzzflyfxFace from "@/components/dzzflyfxFace/index";
import trend from "./unitTrend/index";

export default {
  //大弹窗
  name: "bigPopup",
  components: {
    barComponent,
    trend,
    todayCharge,
    parkingTime,
    dzzflyfxFace,
  },
  data(){
    return {
      barComponentArr:[
        {name:"今日进出总量",value:121,color:"#FFC200"},
        {name:"进场",value:71,color:"#00FFE6"},
        {name:"出场",value:50,color:"#00FFE6"},
      ],
      barComponentArr1:[
        {name:"空余泊位数",value:89,color:"#FFC200"},
        {name:"泊位利用率",value:"39%",color:"#0092FF"},
        {name:"泊位周转率",value:1.1,color:"#0092FF"},
      ],
      barComponentArr_1:[
        {name:"今日充电总量",value:41,color:"#FFC200"},
        {name:"今日充电车次",value:23,color:"#00FFE6"}
      ],
      barComponentArr1_1:[
        {name:"空余充电泊位",value:89,color:"#FFC200"},
        {name:"充电泊位利用率",value:"61%",color:"#0092FF"}
      ],
      config:{
        header: ['充电桩编号', '状态', '使用时长'],
        data: [
          ['GHY2001222-01', '使用中', '40min'],
          ['GHY2001222-012', '使用中', '21min'],
          ['GHY2001222-03', '未使用', '---'],
          ['GHY2001222-04', '未使用', '---'],
          ['GHY2001222-05', '停止服务', 'Error'],
        ],
        index: true,
        columnWidth: [50],
        align: ['center'],
        carousel: 'page',
        headerBGC: "#04101B",
        oddRowBGC: "#04101B",
        evenRowBGC: "#03233C",
      }
    }
  },
  mounted() {
  },
  methods: {
    closeSelf(){
      this.$emit("closeSelf")
    }
  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
//大弹窗部分
.bigPopup{
  position: absolute;
  padding: 1% 2%;
  height: 88%;
  width: 86%;
  bottom: 5%;
  left: 5%;
  z-index: 999;
  background: url(../../assets/selfImp/bigPopupImg.png);
  background-size: 100% 100%;
  .bigPopupHead{
    text-align: center;
    height: 10%;
    .iconfont{
      position: absolute;
      right: 2%;
      top: 3%;
      height: 0.35rem;
      width: 0.35rem;
      color: #0160C8;
      font-size: xx-large;
      border: 2px solid #0160C8;
      border-radius: 45%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    >p{
      font-weight: normal;
      color: #00D2FF;
      line-height: 40px;
      background: linear-gradient(0deg, #ABECFF 0%, #FFFFFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    >.bigPopupTitle{
      width: 100%;
      font-size: xx-large;
    }
  }
  .bigPopupBody{
    margin-top: 0.5%;
    height: 89.5%;
    display: flex;
    justify-content: space-around;
    .right-div{
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .left-div{
      width: 25%;
    }
    .left-first{
      ::v-deep .border-box-content{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
      .left-first-1{
        width: 100%;
        height: 20%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
    }
    .left-second{
      ::v-deep .border-box-content{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
      .left-first-2{
        width: 100%;
        height: 20%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
    }
    .right-first{
      width: 35%;
    }
    .right-second{
      width: 14.3%;
    }
  }
  .bigPopupTitle{
    font-size: 18px;
    font-weight: bold;
    line-height: 26px;
    padding-left: 0.2rem;
    background: linear-gradient(0deg, #ABECFF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .titleH3{
    width: 100%;
    text-align: left;
    padding: 0.5em 0 0.5em 0.7em;
  }
}
</style>
